Estoy tratando de chatear con Angular y Firebase. El chat funciona bien. Pero cuando trato de descargar una imagen de Firebase Storage, se descarga pero no se carga en el img scr en el HTML.

Esta es una parte de mi HTML: (imgChat es el importante)

 <ion-content> <ion-infinite-scroll position="top" (ionInfinite)="loadData($event)"> <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Cargando más mensajes..."> <ion-button (click)="loadData($event)">Cargar más mensajes</ion-button> <div class="scroll"> <ul class="bloqueMensajes"> <li *ngFor="let msg of mensajes | async"> <div class="msgUser" *ngIf="msg.user == currentUser"><p>{{msg.text}}</p></div> <div class="fotoOtro" *ngIf="msg.key"> <img class="imgChat" *ngIf="msg.key" id="msg.key" alt="Imagen Que Passap" [src]="listaImgDescargadasPop"> </div> <div class="msgOtro" *ngIf="msg.user != currentUser"> <p class="nombre">{{msg.user}}</p> <p class="texto">{{msg.text}}</p> </div> </li> </ul> </div> </ion-infinite-scroll-content> </ion-infinite-scroll> </ion-content>

Además, aquí está mi .ts:

 listaImgDescargadasPop: any; constructor(...){ this.obtenerFotoByKey('1658225112019.jpeg'); }

Este método:

 async obtenerFotoByKey(key){ this.listaImgDescargadasPop = await this.fotosService.obtenerUrlByKey2(key); console.log('listaImgDescargadasPop ='+this.listaImgDescargadasPop); }

En este momento, todo funciona como se esperaba. Pero aquí aparece el problema. Esto devuelve la URL de descarga y se establece en [src]

 obtenerUrlByKey2(key){ console.log('Entra a Obtener2'); // Create a reference to the file we want to download const storage = getStorage(); const starsRef = ref(storage, 'images/'+key); // Get the download URL return getDownloadURL(starsRef) .then((url) => { return url; }) .catch((error) => { console.log('ERROR'); return undefined; }); } }

aquí hay una imagen que muestra el problema